<template>
  <div class="standby-page" @click="returnToHome" @mousemove="returnToHome" @keydown="returnToHome">
    <!-- GIF动画容器（全屏背景） -->
    <div class="gif-container">
      <!-- 加载状态提示（GIF过大时显示） -->
      <!-- <div class="loading" v-if="isLoading">
        <div class="spinner"></div>
      </div> -->
      <!-- GIF动画元素（loop属性确保循环播放） -->
      <img 
        ref="standbyGif"
        v-if="!isError"
        src="/animations/mainCartoon.gif"
        class="standby-gif"
        alt="待机动画"
        loop
        @load="onGifLoaded"  
        @error="onGifError" 
      >
      <!-- 加载失败提示 -->
      <div class="error" v-if="isError">
        <p>动画加载失败，请点击返回首页</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const standbyGif = ref(null); // GIF元素引用
const isLoading = ref(true); // 加载状态
const isError = ref(false); // 加载错误状态

// 返回首页并清理GIF资源
const returnToHome = () => {
  // 释放GIF资源（避免400M资源持续占用内存）
  if (standbyGif.value) {
    standbyGif.value.src = ''; // 清空图片源
  }
  router.push('/home');
};

// GIF加载完成回调
const onGifLoaded = () => {
  isLoading.value = false; // 隐藏加载提示
};

// GIF加载失败回调
const onGifError = () => {
  isLoading.value = false;
  isError.value = true; // 显示错误提示
};

onMounted(async () => {
  // 等待DOM渲染后触发GIF加载
  await nextTick();
  // 主动触发GIF加载（部分浏览器可能需要显式加载）
  if (standbyGif.value) {
    // standbyGif.value.load();
  }
});

onBeforeUnmount(() => {
  // 组件卸载时强制释放资源
  if (standbyGif.value) {
    standbyGif.value.src = '';
  }
});
</script>

<style scoped>
.standby-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: 'YouSheBiaoTiHei', sans-serif;
  z-index: 1000;
  cursor: pointer;
  overflow: hidden; /* 隐藏GIF溢出部分 */
  background: #000; /* 黑色背景，避免加载前空白 */
}

/* GIF容器：全屏覆盖 */
.gif-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 动画在底层 */
}

/* GIF样式：全屏填充，保持比例 */
.standby-gif {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 填充容器且不变形 */
  opacity: 0; /* 初始透明，加载完成后显示 */
  transition: opacity 0.5s ease;
}

/* 加载完成后显示GIF */
.standby-gif[src]:not([src=""]) {
  opacity: 1;
}

/* 加载状态样式 */
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2; /* 加载提示在GIF之上 */
}

/* 加载动画（旋转图标） */
.spinner {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-top: 5px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 错误提示样式 */
.error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ff4444;
  z-index: 2;
}

/* 原有待机文案样式（保持顶层） */
.standby-content {
  position: relative;
  z-index: 3; /* 确保文案在最上层 */
  text-align: center;
  padding: 2rem;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  backdrop-filter: blur(5px);
}

.standby-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.standby-content p {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

/* 动画定义 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .standby-content h1 {
    font-size: 2rem;
  }
  
  .standby-content p {
    font-size: 1.2rem;
  }
  
  .spinner {
    width: 30px;
    height: 30px;
  }
}
</style>